<template>
    <div>
        <template v-if="!hasChildren">
            <el-tag closable @close="deleteRoleTag(item)" v-for="item in children" :key="item.id">{{item.authName}}</el-tag>
        </template>
        <template v-else>
        <div class="box" v-for="item in children" :key="item.id">
            <div class="left">
                <el-tag @close="deleteRoleTag(item)" closable>{{item.authName}}</el-tag>
            </div>
            <div class="right">
                <Tag v-on="$listeners" :roleId="roleId" v-if="item.children" :children="item.children"></Tag>
            </div>
        </div>
        </template>
    </div>
</template>
<script>
import {deleteTag} from '@/api/role'
// 递归就是自己调用自己(组件也是，组件调用自身组件)
//递归结束条件:=>组件：
export default {
    name:"Tag",  //name可以用来做组件递归，name名就是自身的组件名称
    computed:{
        /**
         * 是否有下一层
         */
        hasChildren(){
            if(!this.children.length){
                return false;
            }else{
                return !!this.children[0].children;
            }
        }
    },
    methods: {
        /**
         * 删除标签
         */
        async deleteRoleTag(row){
            try {
                // console.log(1)
               await this.$mb.confirm(`您确定要删除【${row.authName}】吗？`);
            //    console.log(2)
               await deleteTag(this.roleId,row.id);
               this.$m.success('删除成功');
               this.$emit('update')
            } catch (error) {};
        },
    },
    props:{
        /**
         * 角色数据
         */
        roleId:{
            required:true,
            type:Number
        },
        children:{
            type:Array,
            default:()=>[],
        },
    }
}
</script>
<style lang="less" scroped>
    .box{
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        .left{
            padding: 20px;
        }
        .right{
            flex:1;
        }
    }
    .el-tag{
        margin: 5px 10px;
    }
</style>